紅框中的句子 Welcome to Your Vue.js App 如果我們想要將其中的 Vue.js 變成隨時可以替換時該怎麼辦？

上一篇我們介紹的基礎用法只適用於文字固定不變的字串，並沒有辦法處理上面的情況，所以今天我們就是要來分享如何加入插值 (Interpolations) 解決上面的問題以及其他的進階語法！如果還沒有看過上一篇 Vue i18n - 導入 & 基礎用法 的朋友可以先看過再回來此篇做閱讀，那我們開始囉！

Interpolations

在定義語系檔時，如果要表示插值 (Interpolations)，Vue i18n 有提供兩種方式

• Named interpolation
• List interpolation

Named interpolation

{
	"title": "Welcome to Your {appName} App"
}

Named interpolation 讓我們在定義語系檔時可以指定插值的名稱，以至於後續在 JavaScript 中可以將 appName 作為參數將值傳入 API 中。

所以在 template 的寫法會是：

<p>{{ $t('title', { appName: 'Vue.js' }) }}</p>

得到的結果會是：

<p>Welcome to Your Vue.js App</p>

範例程式碼

List interpolation

{
	"title": "Welcome to Your {0} App"
}

List interpolation 讓我們在定義語系檔時是以 Array 的 index 來定義插值，所以後續在 JavaScript 中則是將 Array 作為參數傳入 API 中。

所以在 template 的寫法會是：

<p>{{ $t('title', ['Vue.js']) }}</p>

得到的結果就一樣也會是：

<p>Welcome to Your Vue.js App</p>

Linked messages

如果有一個單字字詞總是包含在另一個字句中，我們可以將兩者鏈接在一起。

要鏈接到另一個字句中的方式就是在定義語系檔時透過 @:key 將兩者鏈接。

{
  "word": {
    "app": "App"
  },
  "title": "Welcome to Your {appName} @:word.app"
}

所以在 template 的寫法會是：

<p>{{ $t('title', { appName: 'Vue.js' }) }}</p>

得到的結果會是：

<p>Welcome to Your Vue.js App</p>

Built-in Modifiers

在英文語系中，如果這個字詞在單獨使用的和鏈接一起使用時有大小寫的差異，vue i18n 有提供三種內建的修飾符來幫助我們。

• upper: 將單字中的所有英文字母變成大寫
• lower: 將單字中的所有英文字母變成小寫
• capitalize: 將所有單字的第一個字母變成大寫

{
  "homeAddress": "Home address",
  "missingHomeAddress": "Please provide @.lower:homeAddress"
}

所以在 template 的寫法會是：

<label>{{ $t('homeAddress') }}</label>
<p>{{ $t('missingHomeAddress') }}</p>

得到的結果會是：

<label>Home address</label>
<p>Please provide home address</p>

Custom Modifiers

如果有需要，你也可以自己定義客製化的修飾符

export default createI18n({
  locale: 'en',
	...
	modifiers: {
    snakeCase: (str) => str.split(' ').join('_')
  }
})

{
  "snakeCase": "snake case",
  "custom_modifier": "custom modifiers example: @.snakeCase:snakeCase"
}

Special Characters

因為一些進階語法的格式需求，所以編譯器會將以下字符作特殊處理：

• {
• }
• @
• $
• |

所以如果遇到想要呈現的文字內容有這些字符時，需要用 {''} 將字符包起來。

// 錯誤
{
   "email": "example@gmail.com"
}

// 正確
{
   "email": "example{'@'}gmail.com"
}

參考資料

• Vue I18n 官方文件

今天的分享就到這邊，如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章，如果對內容有任何疑問，或是文章內容有錯誤，都非常歡迎留言討論或指教的！

明天要來分享的是 Vue i18n 主題的第三篇 Pluralization ，那我們明天見！